<template>
  <div class="cus-list">
    <a-card style="margin-bottom: 10px">
      <div class="card-context">
        <div>
          <SearchOutlined /> <span style="margin-left: 10px">筛选搜索</span>
        </div>
        <div>
          <a-button style="margin-right: 20px">重置</a-button
          ><a-button type="primary">查询结果</a-button>
        </div>
      </div>
      <div style="padding: 20px">
        <a-form layout="inline">
          <a-form-item label="用户账号">
            <a-input placeholder="请输入用户账号" />
          </a-form-item>
          <a-form-item label="手机号">
            <a-input placeholder="请输入用户手机号" />
          </a-form-item>
        </a-form>
      </div>
    </a-card>

    <a-card>
      <div class="card-context">
        <div>
          <BarsOutlined /><span style="margin-left: 10px">数据列表</span>
        </div>
      </div>
    </a-card>

    <a-table
      :columns="columns"
      :data-source="data"
      bordered
      ellipsis
      style="margin-top: 10px"
      rowKey="cusId"
    >
      <template #cusAvatar="{ record }">
        <a-avatar :src="record.cusAvatar"></a-avatar>
      </template>
      <template #cusGender="{ record }">
        <a-tag color="red" v-if="record.cusGender"> 女 </a-tag>
        <a-tag color="blue" v-else> 男 </a-tag>
      </template>
      <template #expandedRowRender="{ record }">
        <a-row :gutter="[16, 16]" v-if="record.addresses[0].addrId!=null">
          <a-col :span="6" v-for="(item, index) in record.addresses" :key="index">
            <div class="bg">
              <div class="addr-hd">
                {{
                  item.addrProvince +
                  item.addrCity +
                  "(" +
                  item.addrConsignee +
                  "收)"
                }}
              </div>
              <div class="addr-bd">
                {{
                  item.addrProvince +
                  item.addrCity +
                  item.addrDistrict +
                  item.addrTowns +
                  item.addrDetailed +
                  "  " +
                  item.addrTel
                }}
              </div>
            </div>
          </a-col>
        </a-row>
        <a-empty v-else description="该用户未添加收货地址"/>
      </template>
    </a-table>
  </div>
</template>
<script>
const columns = [
  {
    title: "用户ID",
    dataIndex: "cusId",
    key: "cusId",
    align: "center",
  },
  {
    title: "用户昵称",
    dataIndex: "cusNickname",
    key: "cusNickname",
    align: "center",
  },
  {
    title: "用户头像",
    dataIndex: "cusAvatar",
    key: "cusAvatar",
    align: "center",
    slots: { customRender: "cusAvatar" },
  },

  {
    title: "手机号",
    dataIndex: "cusTel",
    key: "cusTel",
    align: "center",
  },
  {
    title: "性别",
    key: "cusGender",
    dataIndex: "cusGender",
    align: "center",
    slots: { customRender: "cusGender" },
  },
];

const data = [


];

import { BarsOutlined, SearchOutlined } from "@ant-design/icons-vue";

export default {
  components: {
    BarsOutlined,
    SearchOutlined,
  },
  data() {
    return {
      data,
      columns,
    };
  },
  mounted(){

this.getData();
  },
  methods: {
    getData() {
      this.$axios.get("/admin/customer/all").then((res) => {
        if (res.data.code == 2000) {
          this.data = res.data.data;
        } else {
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.cus-list {
  padding: 24px;
  background-color: #fff;
  margin: 24px 16px;
}
.card-context {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-context > div:nth-child(1) {
  font-size: 20px;
}
.bg {
  background: url(https://img.alicdn.com/tfs/TB1OVRCRpXXXXaMXFXXXXXXXXXX-237-106.png)
    no-repeat;
  padding: 11px 15px;
  overflow: hidden;
  height: 106px;
  max-width: 237px;
}
.bg .addr-hd {
  border-bottom: 1px solid #f2f2f2;
  padding: 0 0 5px;
  margin-bottom: 5px;
  line-height: 18px;
  font-weight: 700;
}
.bg .addr-bd {
  height: 56px;
}
</style>